<template>
  <div class="edit-container" :style="{ padding: padding + 'px' }">
    <div class="commentTitle">指标名称
      <el-button type="text" size="small" @click="handEditTitle">编辑</el-button>
    </div>
      <el-input v-model="indexName" type="text" class="article-textarea" autosize placeholder="输入指标名称" />
    <div class="commentTitle">指标项</div>
    <div class="noMark">
      <span class="noMark-desc" v-if="!indexList.length">没有找到任何指标体系</span>
      <el-button type="primary" round icon="el-icon-plus" size="mini" @click="handAddIndex(0)">添加一级指标</el-button>
    </div>
    <div class="index-items">
      <div class="content" v-for="(item,index) in indexList" :key="index">
        <div class="content-header">
          {{ index+1 }}、<span class="content-header_title">{{item.content}}</span>
          <span class="content-header_score">{{ item.score || 0 }}分</span>
          <div class="content-header_btngroup">
            <el-button type="text" icon="el-icon-plus" @click="handAddIndex(1,item.id,index)">下级指标</el-button>
            <el-button type="text" icon="el-icon-edit" @click="handUpdateIndex(1,item.id,index)">修改</el-button>
            <el-button type="text" icon="el-icon-close" @click="handDelIndex(1,item.id,index)">删除</el-button>
          </div>
        </div>
        <div class="content-time"><span v-show="item.create_time">创建时间：</span> {{ parseTime(item.create_time) }}</div>
        <div class="content-desc"><span v-show="item.evaluation">考核标准: </span> {{ item.evaluation }}
        </div>
        <template>
          <div class="sub-wrapper">
            <div class="content" v-for="(subItem,subIndex) in item.child" :key="subIndex">
              <div class="content-header">
                {{ index+1 }}-{{ subIndex+1 }}、<span class="content-header_title">{{subItem.content}}</span>
                <span class="content-header_score">{{ subItem.score || 0 }}分</span>
                <div class="content-header_btngroup">
                  <el-button type="text" icon="el-icon-plus" @click="handAddIndex(2,subItem.id,index,subIndex)">下级指标
                  </el-button>
                  <el-button type="text" icon="el-icon-edit" @click="handUpdateIndex(2,subItem.id,index,subIndex)">修改
                  </el-button>
                  <el-button type="text" icon="el-icon-close" @click="handDelIndex(2,subItem.id,index,subIndex)">删除
                  </el-button>
                </div>
              </div>
              <div class="content-time"><span v-show="subItem.create_time">截至时间：</span>
                {{ parseTime(subItem.create_time) }}</div>
              <div class="content-desc"><span v-show="subItem.evaluation">考核标准: </span> {{ subItem.evaluation }}
              </div>
              <template>
                <div class="son-wrapper" style="margin-left:10px;">
                  <div class="content" v-for="(sonItem,sonIndex) in subItem.child" :key="sonIndex">
                    <div class="content-header">
                      {{ index+1 }}-{{ subIndex+1 }}-{{ sonIndex+1 }}、<span
                        class="content-header_title">{{ sonItem.content }}</span>
                      <span class="content-header_score">{{ sonItem.score }}分</span>
                      <div class="content-header_btngroup">
                        <el-button type="text" icon="el-icon-edit"
                          @click="handUpdateIndex(3,sonItem.id,index,subIndex,sonIndex)">修改</el-button>
                        <el-button type="text" icon="el-icon-close"
                          @click="handDelIndex(3, sonItem.id,index, subIndex, sonIndex)">删除</el-button>
                      </div>
                    </div>
                    <div class="content-time"><span v-show="sonItem.time">截至时间：</span> {{ sonItem.time}}</div>
                    <div class="content-desc"><span v-show="sonItem.evaluation">考核标准: </span> {{ sonItem.evaluation }}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
    <el-dialog title="编辑指标" :visible.sync="dialogFormVisible" append-to-body>
      <el-form :model="indexForm" label-width="80px">
        <el-form-item label="指标内容">
          <el-input type="textarea" rows="3" v-model="indexForm.content"></el-input>
        </el-form-item>
        <el-form-item label="指标分值" prop="score" label-width="80px">
          <el-input type="number" v-model="indexForm.score"></el-input>
        </el-form-item>
        <el-form-item label="评分标准" label-width="80px">
          <el-input type="textarea" rows="3" v-model="indexForm.evaluation"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitIndexForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    createDetailIndex,
    getIndexByid,
    updateDetailIndex,
    createIndex,
    deleteDetailIndex,
    delTask,
    patchIndex
  } from '@/api/work.js'
  import {
    getTable,
    getQuestion
  } from '@/api/question.js'
  import {
    parseTime
  } from '@/utils/index'
  import axios from 'axios'
  import Cookies from 'js-cookie'
  export default {
    name: 'EditIndex',
    watch: {
      dialogFormVisible(val) {
        if (!val) {
          this.clearIndexForm()
        }
      },
      targetId: {
        handler: function (val) {
          if (val) {
            this.initIndexId = val
            this.fetchData(val)
          }
        },
        immediate: true
      }
    },
    props: {
      targetId: {
        type: Number
      },
      padding: {
        type: Number,
        default: 30
      },
      isTask: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dialogFormVisible: false,
        indexName: '',
        indexForm: {
          score: '',
          evaluation: '',
          content: ''
        },
        indexType: 0,
        parentId: null,
        initIndexId: null,
        indexId: {},
        isUpdate: false,
        indexList: []
      }
    },
    created() {
      // let id = null
      // if(this.targetId){
      //   id = this.targetId
      // }else{
      // }
      let id = this.$route.params && this.$route.params.id
      if (id && !this.isTask) {

        this.initIndexId = id
        this.fetchData(id)
      }
    },
    methods: {
      parseTime,
      fetchData(id) {
        getIndexByid(id).then(res => {
          const data = res.data

          this.indexList = res.data.tardetail
          this.indexName = res.data.name
        })
      },
      // 修改指标名称
      handEditTitle(){
        patchIndex(this.initIndexId, {name: this.indexName}).then(
          res =>{
            this.$message.success('修改指标名称成功')
            this.$emit('createUp')
          }
        )
      },
      // 添加子级指标
      handAddIndex(type = 0, parentId = null, index = 0, subIndex = 0, child = 0) {
        if (!this.indexName) {
          this.$message.warning('请输入指标名称')
          return
        }
        this.isUpdate = false
        this.parentId = parentId
        this.dialogFormVisible = true
        this.indexType = type
        // this.indexId = {
        //   first: index,
        //   second: subIndex,
        //   three: child
        // }
      },
      // 修改子级指标
      handUpdateIndex(type = 0, parentId = null, index = 0, subIndex = 0, child = 0) {
        this.isUpdate = true
        this.parentId = parentId
        this.dialogFormVisible = true
        switch (type) {
          case 1:
            this.indexForm = this.indexList[index];
            break
          case 2:
            this.indexForm = this.indexList[index].child[subIndex];
            break
          case 3:
            this.indexForm = this.indexList[index].child[subIndex].child[child];
            break
        }
      },
      // 删除子级指标
      handDelIndex(type = 0, currenid = null, index = 0, subIndex = 0, child = 0) {
        this.$confirm('是否确定删除指标项？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDetailIndex(currenid).then(res => {
            this.$message({
              message: '删除指标成功',
              type: 'success'
            });
            this.fetchData(this.initIndexId)
            this.$emit("editUp")
          })
          this.dialogFormVisible = false
        }).catch(() => {

        })
      },
      // 弹框确定 修改静态指标项值
      submitIndexForm() {
        const type = this.indexType
        const {
          first,
          second,
          three
        } = this.indexId
        // 判断指标内容是否为空
        if (!this.indexForm.content) {
          this.$message.warning('请输入指标内容')
          return
        }
        if (!this.indexForm.score || !/^\d+$/g.test(this.indexForm.score)) {
          this.$message.warning('请输入有效的指标分数')
          return
        }
        const {
          content,
          score,
          evaluation
        } = this.indexForm
        if (!this.isUpdate) {
          // this.indexForm.parent = this.parentId
          if (type === 0) {
            let param = {
              target: this.initIndexId,
              content: content,
              score: score,
              evaluation: evaluation
            }
            createDetailIndex(param).then(res => {
              if (res && res.data && res.data.content) {
                this.$notify({
                  title: '成功',
                  message: '添加一级指标成功',
                  type: 'success'
                });
                this.fetchData(this.initIndexId)
                this.$emit("editUp")
              } else {
                this.$message.error('系统出现异常，添加指标失败')
              }
            })
          } else {

            createDetailIndex({
              parent: this.parentId,
              content: content,
              score: score,
              evaluation: evaluation
            }).then(res => {
              if (res && res.data && res.data.content) {
                this.$notify({
                  title: '成功',
                  message: '添加下级级指标成功',
                  type: 'success'
                });
                this.fetchData(this.initIndexId)
                this.$emit("editUp")
              } else {
                this.$message.error('系统出现异常，添加指标失败')
              }
            })
          }

          this.dialogFormVisible = false
        } else {
          updateDetailIndex(this.parentId, {
            content: content,
            score: score,
            evaluation: evaluation
          }).then(res => {
            if (res && res.data) {
              this.$message({
                message: '修改指标成功',
                type: 'success'
              });
              this.fetchData(this.initIndexId)
              this.$emit("editUp")
            }
          })
          this.dialogFormVisible = false
        }
      },
      clearIndexForm() {
        this.indexForm = {
          content: '',
          score: '',
          evaluation: '',
          child: []
        }
        this.isUpdate = false
      }
    }
  }

</script>
<style lang="scss">
  .edit-container {
    .article-textarea {
      margin-bottom: 10px;
    }

    .commentTitle {
      display: inline-block;
      padding: 5px 0;
      font-size: 16px;
    }

    .noMark {
      padding-bottom: 10px;

      &-desc {
        font-size: 18px;
        color: #ccc;
      }
    }

    .index-items {
      .content {
        padding: 4px 6px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px #ccc;

        &-header {
          display: flex;
          flex-wrap: wrap;
          padding: 5px 0;

          &_title {}

          &_score {
            padding: 0 10px;
            color: red;
          }

          &_btngroup {
            display: none;

            .el-button {
              padding: 0;
            }
          }

        }

        &:hover {
          .content-header_btngroup {
            display: inline-block;
          }
        }

        &-time,
        &-desc {
          font-size: 14px;
          line-height: 1.5;
          color: #a7a7a7;
          text-indent: 2em;
        }

        .sub-wrapper {
          .content {
            margin-left: 25px;
            box-shadow: none !important;
            .content-time,
            .content-desc {
              text-indent: 2.8em;
            }

            .son-wrapper {
              .content {

                .content-time,
                .content-desc {
                  text-indent: 3.6em;
                }
              }
            }
          }
        }
      }
    }
  }

</style>
